<template>
  <div class="toast"  v-show="isShow">
    <div>{{message}}</div>
  </div>
</template>

<script>
export default {
  name: 'Toast',
  data () {
    return {
      message: '',
      isShow: false
    }
  },
  methods : {
    show (message,duration = 1500) {
      this.isShow = true
      this.message = message

      setTimeout(() => {
        this.isShow = false
        this.message = ''
      }, duration);
    }
  }
  
}
</script>

<style lang="less" scoped>
    .toast {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 1.8rem;
      height: .3rem;
      text-align: center;
      line-height: .3rem;
      font-size: .15rem;
      border-radius: .1rem;
      transform: translate(-50%,-50%);
      color: #fff;
      padding: .08px .1px;
      z-index: 999;
      background-color: rgba(0, 0, 0, .75);
    }
</style>